<template>
	<view>
		<view class="info">
			<view class="title">{{ title }}({{section_title}})</view>
			<view class="time">
				<text>演出开始时间：{{ start_time | formatDate }}</text>
			</view>
			
			<view class="time">
				<text>不可选</text>
				<image class="image seat-icon" src="/static/images/seat_u-2.png"></image>
				<text style="margin-left: 20rpx;">可选</text>
				<image class="image seat-icon" src="/static/images/seat_0.png"></image>
				<text style="margin-left: 20rpx;">已售</text>
				<image class="image seat-icon" src="/static/images/seat_2.png"></image>
				<text style="margin-left: 20rpx;">已团购</text>
				<image class="image seat-icon" src="/static/images/seat_3.png"></image>
			</view>
			<view class="detail">
				<text>当前：{{region_number}}区</text>
				<text></text>
			</view>

			<!-- <view class="desc">
				<text v-for="(item, index) in seats" :key="index">
					<text v-if="item" style="margin-right: 15px">{{ item[0].row_number }}排¥{{ item[0].price }}</text>
				</text>
			</view> -->

		</view>
		<view class="dir-box">
			<image src="../../../static/2images/dir_img.png" mode=""></image>
		</view>
		<view class="seats">
			<view v-for="(item, index) in seats" :key="index" class="seat-list">
				<text class="pai">{{item[0].row_code}}排</text>
				<Seat :index="index" :item="sub" v-for="(sub, idx) in item" :key="idx" :checked="sub.checked"
					:status="sub.status" :isGroup="sub.is_group" :cStatus="sub.c_status" :refund_order="sub.refund_order" @click="toggleChecked(sub)">

				</Seat>
			</view>
		</view>
		<view class="desc" v-if="sel.length>0">
			<text>已选：</text>
			<text v-for="(item, index) in sel" :key="index">
				<text v-if="item"
					style="margin-right: 15px">{{item.region_number}}区{{ item.row_code }}排{{ item.col_code }}座 ¥{{item.price}}</text>
			</text>
		</view>
		<view class="tip">
			试一试，可以向右滑动选座哦！
		</view>
		<view class="footer">
			<text class="font-color-red">￥{{ total }}</text>
			<view class="btn" @click="onSubmit">确认选择</view>
		</view>
	</view>
</template>

<script>
	import Seat from "./seat.vue";
	import {
		performChoiceList,
		performRegion_choice_list
	} from "@/api/2_activity";
	import {area_location_list} from "@/api/show";

	export default {
		components: {
			Seat
		},
		data() {
			return {
				id: '',//区域id
				title: '',
				section_title:'',
				remark: '',
				start_time: '',
				region_number: '',
				seats: [],
				sel: [],
				region_number: '',
				price: 0,
				group_rate:1,//折扣
				is_discount:'1',//是否打折
			};
		},
		onLoad(options) {
			this.id = options.id
			this.region_number = options.region_number
			this.title = options.title
			this.section_title = options.section_title;
			// this.region_number = options.region_number
			this.price = options.price
			this.is_discount = options.is_discount
			this.remark = options.remark
			this.start_time = options.start_time
			this.sel = JSON.parse(options.sel)
			console.log(this.sel);

			area_location_list(this.id).then(res => {
				
				let {
					list
				} = res.data
				
				console.log(list);
				let seats = []
				list.forEach(item => {
					item.map(item2 => {
						item2.checked = false
						this.sel.map(item1 => {
							if (item1.id == item2.id) {
								item2.checked = true
							}
						})

					})
					if (!seats[item.row_number]) {
						seats[item.row_number] = []
					}
					seats[item.row_number].push(item)
				})
				this.seats = list
				console.log(list)
			})
		},
		computed: {
			total() {
				let total = 0
				this.seats.forEach(item => {
					item.forEach(sub => {
						if (sub.checked) {
							total += parseFloat(sub.price)
						}
					})

				})
				console.log(total);
				if(this.is_discount == '0' || this.is_discount == 0){
					this.group_rate = 1;
				}
				total = total * this.group_rate;
				return total.toFixed(2)
			}
		},
		methods: {
			toggleChecked(item) {
				console.log(item)
				item.checked = !item.checked

				if (item.checked) {
					this.sel.push(item)
				} else {
					this.sel = this.sel.filter(function(item1) {
						return item1.id !== item.id
					})

				}
				//计算折扣
				if(this.sel.length >= 5){
					if(this.sel.length >= 5 && this.sel.length < 10){
						this.group_rate = 0.95;
						//5-10张95折
					}else if(this.sel.length >= 10){
						this.group_rate = 0.9;//10张以上9折
					}
				}else{
					this.group_rate = 1.0;
				}
				//  this.sel.map(item1=>{
				// 	if(item1.id != item.id && item.checked){
				// 		this.sel.push(item)
				// 	}
				// })



			},
			onSubmit() {
				
				let select_site = []
				let select = []

				this.seats.forEach(item => {
					item.forEach(sub => {
						if (sub.checked) {
							select_site.push(`${sub.region_number}-${sub.column_number}`)
							select.push(sub)
						}
					})
				})
				uni.$emit('updateSeat', select,this.region_number)
				uni.navigateBack({
					delta: 1
				})
				// if (select_site.length == 0) {
				// 	uni.showToast({
				// 		title: '请选择座位',
				// 		icon: 'none'
				// 	})
				// 	return
				// }

				// uni.navigateTo({
				// 	url: `/pages/2_development/show_buy_ticket/pay?id=${this.id}&title=${this.title}&start_time=${this.start_time}&remark=${this.remark}&select_site=${select_site.join(',')}&select=${JSON.stringify(select)}`
				// })
			}
		}
	};
</script>

<style lang="scss">
	.seat-icon {
		width: 50rpx;
		height: 50rpx;
		margin-right: 6rpx;

	}

	.footer {
		width: 100%;
		// height: 100rpx;
		background-color: #fff;
		padding: 10rpx 30rpx;
		font-size: 28rpx;
		color: #333;
		box-sizing: border-box;
		position: fixed;
		bottom: 0;
		left: 0;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding-bottom: calc(10rpx + constant(safe-area-inset-bottom));
		padding-bottom: calc(10rpx + env(safe-area-inset-bottom));

		.price {
			font-size: 28rpx;
			color: #fff;
		}

		.btn {
			font-size: 30rpx;
			color: #fff;
			width: 240rpx;
			height: 70rpx;
			background-color: #e93323;
			border-radius: 50rpx;
			text-align: center;
			line-height: 70rpx;
		}
	}

	.info {
		background: #fff;
		padding: 20rpx 0;
	}

	.title {
		font-size: 32rpx;
		font-weight: 700;
		margin: 20rpx 30rpx 0;
	}

	.time {
		margin: 20rpx 30rpx;


		display: flex;
		align-items: center;

		text {
			font-size: 24rpx;
			color: #82848f;
		}
	}

	.detail {
		font-size: 24rpx;
		color: #f00;
		padding: 0 30rpx;
	}

	.desc {
		margin: 20rpx 30rpx;
		font-size: 24rpx;
		color: #f00;
		margin-bottom: 100rpx;
	}

	.tip {
		margin: 20rpx 30rpx 200rpx;
		font-size: 24rpx;
		color: #F0AD4E;
		text-align: center;
		
	}

	.dir-box {
		background: #fff;
		padding: 30rpx;
		width: calc(100vw - 32px);
		height: 500rpx;
		border-radius: 56rpx;
		background: #fff;
		margin: 20rpx auto 0;
		box-shadow: 0 0 30rpx rgba(0, 0, 0, 0.16);
	
		image {
			height: 100%;
			width: 100%;
		}
	
		.dir-text {
			height: 88rpx;
			line-height: 88rpx;
			text-align: center;
			background: #eee;
			border-radius: 10rpx;
		}
	}

	.prices {
		background: #fff;
		padding: 30rpx;
		width: calc(100vw - 32px);
		border-radius: 56rpx;
		background: #fff;
		margin: 32rpx auto 150rpx;
		box-shadow: 0 0 30rpx rgba(0, 0, 0, 0.16);
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;

		.price-item {
			width: 45%;
			background-color: rgba(205, 174, 27, .12);
			margin-bottom: 40rpx;
			height: 96rpx;
			font-size: 16px;
			color: #c96e1b;
			line-height: 96rpx;
			display: flex;
			justify-content: space-around;
			padding: 0 20rpx;

			&:first-child {
				width: 100%;
				background-color: rgba(216, 21, 21, .12);
				color: #D82C2C;
			}

			&:nth-child(2),
			&:nth-child(3) {
				background-color: rgba(201, 110, 27, .12);
				color: #C96E1B;
			}
		}
	}

	.seats {
		display: flex;
		flex-direction: column;
		flex-wrap: wrap;
		padding: 30rpx 50rpx;
		background: #fff;
		margin: 20rpx 0 80rpx 0;
		overflow: auto;
		position: relative;

		.seat-list {
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: center;

			.pai {
				width: 60rpx;
				text-align: center;
				position: absolute;
				left: 4rpx;
				// position: fixed;
				// left: 0;
				font-size: 12px;
				height: 50rpx;
				line-height: 50rpx;
				color: #ccc;
			}
		}
	}
</style>
